<template>
    <div class="section-2">
        <div class="container">
            <div class="title">
                <h2>结构概念与自由度设定</h2>
                <p>整机设定共13个自由度：θ1-θ8 可 180° 活动；θ9-θ12 可 90° 活动；θ13 可 360° 全向活动</p>
            </div>
            <div class="flex-grow">
                <div class="flex-item">
                    <div class="shadow" @mouseenter="showActive(1)" @mouseleave="showActive(0)">
                        <div class="bear hover-bear">
                            <transition name="fade">
                                <img src="./images/bear-left-hover.png" v-show="active === 1" transiton="fade">
                            </transition>
                        </div>
                        <div class="bear line-bear">
                            <transition name="fade">
                                <img src="./images/bear-left.png" v-show="active != 1" transiton="fade">
                            </transition>
                            <div class="dots left-bear-dots" v-show="active != 1">
                                <span>1</span><span>2</span><span>3</span><span>4</span>
                            </div>
                        </div>
                    </div>
                    <p>左横截图</p>
                </div>
                <div class="flex-item">
                    <div class="shadow" @mouseenter="showActive(2)" @mouseleave="showActive(0)">
                        <div class="bear hover-bear">
                            <transition name="fade">
                                <img src="./images/bear-right-hover.png" v-show="active === 2" transiton="fade">
                            </transition>
                        </div>
                        <div class="bear line-bear">
                            <transition name="fade">
                                <img src="./images/bear-right.png" v-show="active != 2" transiton="fade">
                            </transition>
                            <div class="dots right-bear-dots" v-show="active != 2">
                                <span>7</span><span>5</span><span>8</span><span>6</span>
                            </div>
                        </div>
                    </div>
                    <p>右横截图</p>
                </div>
            </div>
            <div class="flex-grow">
                <div class="flex-item">
                    <div class="shadow" @mouseenter="showActive(3)" @mouseleave="showActive(0)">
                        <div class="bear hover-bear">
                            <transition name="fade">
                                <img src="./images/bear-front-hover.png" v-show="active === 3" transiton="fade">
                            </transition>
                        </div>
                        <div class="bear line-bear">
                            <transition name="fade">
                                <img src="./images/bear-front.png" v-show="active != 3" transiton="fade">
                            </transition>
                            <div class="dots front-bear-dots" v-show="active != 3">
                                <span>9</span><span>10</span><span>13</span>
                            </div>
                        </div>
                    </div>
                    <p>竖横截图</p>
                </div>
                <div class="flex-item">
                    <div class="shadow" @mouseenter="showActive(4)" @mouseleave="showActive(0)">
                        <div class="bear hover-bear">
                            <transition name="fade">
                                <img src="./images/bear-back-hover.png" v-show="active === 4" transiton="fade">
                            </transition>
                        </div>
                        <div class="bear line-bear">
                            <transition name="fade">
                                <img src="./images/bear-back.png" v-show="active != 4" transiton="fade">
                            </transition>
                            <div class="dots back-bear-dots" v-show="active != 4">
                                <span>11</span><span>12</span>
                            </div>
                        </div>
                    </div>
                    <p>竖横截图</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            active: 0
        }
    },
    methods:{
        showActive(index) {
            this.active = index;
        }
    }
}
</script>

<style lang="less" scoped>
.section-2{
    background: #111111;
    text-align: center;
    .title{
        padding:75px 0 60px 0;
        
        h2{
            font-size:30px;
            color:#fff;
            line-height:25px;
        }
        p{
            color:#B3B3B3;
            font-size:18px;
            line-height:25px;
            margin-top:30px;
        }
    }
    .flex-grow{
        .flex-item{
            padding-bottom:70px;
            .shadow{
                max-width:80%;
                height:280px;
                margin:auto;
                cursor: pointer;
                background:rgba(191,191,191,0.18);
                position: relative;
                .bear{
                    position: absolute;
                    top:50%;
                    left:50%;
                    transform: translate(-50%,-50%);
                }
                .dots{
                    span{
                        font-size:12px;
                        width: 26px;
                        height: 26px;
                        display: inline-block;
                        text-align:center;
                        line-height:26px;
                        color:#000;
                        position: absolute;
                        &:before{
                            content: "";
                            width:16px;
                            height:16px;
                            background: #FFE500;
                            border-radius: 50%;
                            position: absolute;
                            left: 50%;
                            top: 50%;
                            margin-left: -8px;
                            margin-top: -8px;
                            z-index: -1;
                        }
                        &:after{
                            opacity: 0;
                            content: "";
                            width: 26px;
                            height: 26px;
                            background: #FFE500;
                            border-radius: 50%;
                            position: absolute;
                            left: 50%;
                            top: 50%;
                            margin-left: -13px;
                            margin-top: -13px;
                            z-index: -2;
                            animation: ballScale 4s linear 0s infinite;
                        }
                    }
                    &.left-bear-dots{
                        span{
                            &:nth-child(1){
                                top: 32%;
                                left: 37%;
                            }
                            &:nth-child(2){
                                top: 32%;
                                right: 13%;
                            }
                            &:nth-child(3){
                                bottom:22%;
                                left: 37%;
                            }
                            &:nth-child(4){
                                bottom:22%;
                                right: 13%;
                            }
                        }
                    }
                    &.right-bear-dots{
                        span{
                            &:nth-child(1){
                                top: 32%;
                                left: 13%;
                            }
                            &:nth-child(2){
                                top: 32%;
                                right: 37%;
                            }
                            &:nth-child(3){
                                bottom:22%;
                                left: 13%;
                            }
                            &:nth-child(4){
                                bottom:22%;
                                right: 37%;
                            }
                        }
                    }
                    &.front-bear-dots{
                        span{
                            &:nth-child(1){
                                top: 40%;
                                left: 30%;
                            }
                            &:nth-child(2){
                                top: 40%;
                                right: 30%;
                            }
                            &:nth-child(3){
                                top: 33%;
                                left: 50%;
                                margin-left:-13px;
                            }
                        }
                    }
                    &.back-bear-dots{
                        span{
                            &:nth-child(1){
                                top: 35%;
                                left: 30%;
                            }
                            &:nth-child(2){
                                top: 35%;
                                right: 30%;
                            }
                        }
                    }
                }
            }
            p{
                color:#B3B3B3;
                font-size:18px;
                margin-top:40px;
                
            }
        }
    }
}

.fade-enter-active, .fade-leave-active {
    transition: opacity .5s
}
.fade-enter, .fade-leave-active {
    opacity: 0
}

@keyframes ballScale{
    0% {
        -webkit-transition: scale(0);
        transition: scale(0);
        opacity: 0;
    }
    80% {
        -webkit-transition: scale(1);
        transition: scale(1);
        opacity: 1;
    }
    100% {
        -webkit-transition: scale(0);
        transition: scale(0);
        opacity: 0;
    }
}
</style>
